<template>
  <div class='setPassword'>
    <navTitle title="设置密码"></navTitle>
    <div class='nav-tabs'>
      <van-tabs :active='activeName' @change='tabChange'>
        <van-tab :title='item.name' v-for='item in tabs' :key='item.value'></van-tab>
      </van-tabs>
    </div>
    <div class='setPassword-container'>
      <template v-if='list.length'>
        <van-collapse accordion v-model='activeCollapse' @change='onChange'>
          <template v-for='(item, index) in list'>
            <van-collapse-item :key='item.id' :title='item.name' :name='index'>
              <div class='setPassword-container-item'>
                内容区域
              </div>
            </van-collapse-item>
          </template>
        </van-collapse>
        <loadEnd v-if='list.length>=queryParams.total' />
      </template>
      <van-empty v-else description='暂无数据'></van-empty>
    </div>
  </div>
</template>

<script>
  // import api from '@/api/index';
  export default {
    data() {
      return {
        tabs: [
          {value: 0, name: '待处理'},
          {value: 1, name: '处理中'},
          {value: 2, name: '已处理'},
        ],
        activeName: 0,
        activeCollapse: 0,
        list: [],
        queryParams: {
          pageSize: 10,
          pageNum: 1,
          total: 0
        },
      }
    },
    computed: {
      userInfo() {
        return this.$store.getters.userInfo || {};
      },
    },
    onLoad(option) {
      this.handleSearch();
    },
    methods: {
      async tabChange({mp}) {  /**顶部tab切换查询*/
        this.activeName = mp.detail.name;
        this.activeCollapse = 0;
        this.handleSearch();
      },
      onChange({mp}) { /**切换抽屉项*/
        if(this.activeNames == mp.detail || mp.detail==='') return;
        this.activeNames = mp.detail;
      },
      async getListFn() {  /**获取列表数据*/
        const data = {
          
        };
        wx.showLoading({ title: '加载中',mask: 'loading'});
        // const res = await api(data);
        // if(res.code == 200) {
        //   this.list = this.list.concat(res.data);
        //   this.queryParams.total = res.total;
        //   setTimeout(()=>{
        //     wx.hideLoading();
        //   }, 500)
        // } else {
        //   wx.showToast({
        //     title: '请求异常',
        //     icon: 'error'
        //   })
        // }
        setTimeout(() => { wx.hideLoading(); }, 500)
      },
      handleSearch() {  /**搜索事件*/
        this.queryParams.pageNum = 1;
        this.queryParams.total = 0;
        this.list = [];
        this.getListFn();
      },
      handleClick(obj) { /**点击列表项事件*/
        wx.navigateTo({
          url: `/pages/index/main?id=$${obj.id}`,
          events: {
            refresh: () => {
              /**接收数据*/
              this.handleSearch();
            }
          }
        })
      }
    },
    onPullDownRefresh() { /**下拉刷新*/
      wx.startPullDownRefresh({
        complete: () => {
          this.handleSearch();
          wx.stopPullDownRefresh();
        }
      });
    },
    onReachBottom() {  /**滚动加载*/
      if(this.list.length < this.queryParams.total) {
        wx.showToast({
          title: '加载更多',
          icon: 'loading'
        })
        this.queryParams.pageNum += 1;
        this.getListFn();
      }
    },
    onShareAppMessage() {
      return {
        title: '小程序',
        path: '/pages/index/main',
        from: 'menu'
      }
    }
  }
</script>
<style lang='scss' scoped>
  .setPassword {
    height: 100vh;
    background: #f5f5f5;
    .setPassword-container {
      padding: 12px;
    }
  }
</style>